
 
	

	<!-- jqueryui / 进度条 start-->
	<!-- 框架的组件文档 "https://www.jqueryui.org.cn/demo/5700.html" -->
	
	<div id="progressbar" style="position: relative;">
		<div class="progress-label" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">加载...</div>
	</div>
	<script type="text/javascript">
    	var progressbar = $( "#progressbar" ),
	      progressLabel = $( ".progress-label" );
	 
	    progressbar.progressbar({
	      value: false,
	      change: function() {//组件改变事件
	        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
	      },
	      complete: function() {//组件完成事件
	        progressLabel.text( "完成！" );
	      }
	    });
	    //每0.1秒使进度条的值加1,
	    function progress() {
	      var val = progressbar.progressbar( "value" ) || 0;
	 
	      progressbar.progressbar( "value", val + 1 );
	 
	      if ( val < 99 ) {
	        setTimeout( progress, 100);
	      }
	    }
	 	//1秒后再执行变化
	    setTimeout( progress, 1000 );
	</script>
	<!-- jqueryui / 进度条 end-->